<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 3000px;
      border: 1px solid salmon;
    }
  </style>
</head>
<body>
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  
</body>
</html>
<script>
// 英文： source  - 源； src
// 事件
  // 事件的组成归类：type + 回调函数
  var box = document.querySelector('body > div'); // 以 CSS 选择器的形式，进行 DOM 的查询
  var boxs = document.querySelectorAll('div');

  // window.onscroll = function() {
  //   console.log('scroll...');
  // }
  // console.log(box, boxs);

  // *** DOM 事件的 组成归类： sourceElement + type + 回调函数
  var box1 = document.querySelector('.box1'); // source
  box1.onclick = function() {
    console.log('点击 box1');
  }
// --------------------
  // storage  -> 存储；  ；  将 JS  在 内存中的数据，存到 硬盘（数据的持久化）上
  // localStorage
  // var data = '123';
  // 添加数据
    // localStorage.setItem('随便起的数据名', data); // data 必须是字符串
  // 查看数据
    // localStorage.getItem('keyName')
  // 删除硬盘上的数据
    // localStorage.removeItem('keyName') // 删除指定的 key
    // localStorage.clear()  // 删除所有 localStorage 中的数据

// localStorage 要存储数据，必须以字符串的形式存储； 复杂数据类型，如何转换成 字符串？

// 内存中 复杂数据类型
var data = {
  name: 'Yo',
  age: 33
}

// {"name":"Yo","age":33} // JSON字符串


// JSON.stringify(data)  // 将 内存中的 复杂数据类型，转换成 JSON 字符串。
// JSON 字符串，如何转换成 内存中的 复杂数据类型？
  // JSON.parse -> 解析 JSON 字符串

console.log(JSON.parse(JSON.stringify(data)));

</script>